import React, { useState } from "react";
import { View, Text, Button, PixelRatio } from "react-native";
import {TestCase, Tester, TestSuite} from "@rnoh/testerino"
import { getStatusBarHeight } from 'react-native-status-bar-height';

const App = (props) => {
    let [statusBarHeight,setData] = useState<number>(0);
    const getstatusbarHeight = () => {
    statusBarHeight = getStatusBarHeight(false);
    setData(statusBarHeight) 
    console.debug(statusBarHeight);
  };
  
  return (
    <Tester style={{flex: 1 , marginTop: 30}}>
      <TestSuite name='getstatusbarHeight'>
        <TestCase itShould={"getstatusbarHeight"}>
          <View style={{ margin: 50, flexDirection: "column", justifyContent: "center" }}>
            <View>
              <Button
              title="getStatusBarHeight"
              onPress={() => getstatusbarHeight()}
              />
              <Text>{"statusBarHeight: "+JSON.stringify(statusBarHeight)+" dp"}</Text>
              <Text>{"statusBarHeight: "+JSON.stringify(PixelRatio.getPixelSizeForLayoutSize(statusBarHeight))+" px"}</Text>
            </View>
          </View>
        </TestCase>
      </TestSuite>
    </Tester>
  );
};

export const displayName = "react-native-status-bar-height";
export const framework = "React";
export const category = "UI";
export const title = "react-native-status-bar-height";
export const documentationURL = "https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-status-bar-height.md";
export const description = "help you to get status bar height";

export const examples = [
  {
    title: "react-native-status-bar-height",
    render: function (): any {
      return <App />;
    },
  },
];